<template>
  <div style="width: 100%;background-color: #f2f3f5;padding-top: 25px">
    <div style="width: 1650px;margin-left: 240px;padding-bottom: 90px">
      <el-row :gutter="20">
        <el-col span="3" style="margin-right: 17px">
          <br>
          <div style="width: 100px;margin-top: 45px">
            <el-button class="overlap-button" circle v-if="isVisible" @click="articleLike">
              <el-icon class="overlap-icon" size="22px">
                <Flag/>
              </el-icon>
            </el-button>
          </div>

          <br>
          <!--    <div style="width: 100px;margin-top: 45px">-->
          <!--      <el-button  class="overlap-button" circle v-if="isVisible"><el-icon class="overlap-icon" size="22px"><Comment /></el-icon></el-button>-->
          <!--    </div>-->
          <!--      <br>-->


          <!--    收藏按钮-->
          <div style="width: 100px;margin-top: 45px">
            <el-button class="overlap-button" circle @click="collectArticle" v-if="isVisible">
              <el-icon class="overlap-icon" size="25px">
                <StarFilled/>
              </el-icon>
            </el-button>


          </div>
          <br>


          <!--      <br>-->
          <!--    <div style="width: 100px;margin-top: 45px">-->
          <!--      <el-button  class="overlap-button" circle v-if="isVisible"><el-icon class="overlap-icon" size="23px"><Promotion /></el-icon></el-button>-->
          <!--    </div>-->
          <!--      <br>-->
          <!--    <div style="width: 100px;margin-top: 45px">-->
          <!--      <el-button  class="overlap-button" circle v-if="isVisible"><el-icon class="overlap-icon" size="23px"><WarnTriangleFilled /></el-icon></el-button>-->
          <!--    </div>-->
          <!--      <br>-->

          <!--打赏按钮-->
          <div style="width: 100px;margin-top: 45px">
            <el-button class="overlap-button" circle @click="reward1=true" v-if="isVisible">
              <el-icon class="overlap-icon" size="21px">
                <Shop/>
              </el-icon>
            </el-button>
          </div>

          <!--    已登录-->
          <el-dialog style="width: 600px;align-items: center;text-align: center;padding-top: 0" title="支持创作,打赏作者"
                     v-model="reward1">
            <p style="margin-top: 0;color: #8a919f">选择你所要打赏的额度</p>
            <el-row align="center">
              <el-button
                  style="width: 100px;height: 80px;font-size: 25px;color: #1e80ff;font-weight: bold;border-color: #1e80ff;margin-left: 100px"
                  @click="button1">$50
              </el-button>
              <el-button
                  style="width: 100px;height: 80px;font-size: 25px;color: #1e80ff;font-weight: bold;border-color: #1e80ff;margin-left: 30px"
                  @click="button2">$100
              </el-button>
              <el-button
                  style="width: 100px;height: 80px;font-size: 25px;color: #1e80ff;font-weight: bold;border-color: #1e80ff;margin-left: 30px"
                  @click="button3">$500
              </el-button>
            </el-row>
            <el-button style="background-color: #007fff;color: #fff;margin-top: 30px" @click="reward">打赏</el-button>
          </el-dialog>
          <br>
          <!--    打赏按钮结束-->


          <!--    阅读模式-->
          <div style="width: 100px;margin-top: 45px">
            <el-button class="overlap-button" circle @click="toggleVisibility">
              <el-icon class="overlap-icon" size="21px">
                <FullScreen/>
              </el-icon>
            </el-button>
          </div>


        </el-col>
        <el-col span="20">

          <div style="width: 825px">
            <el-row gutter="20">
              <el-col span="17">
                <el-card style="padding: 0 17px">
                  <div class="main-area article-area;" style="overflow:hidden">
                    <article class="article">
                      <h1 class="article-title">
                        {{ c.title }}
                      </h1>
                      <el-divider></el-divider>
                      <div class="author-info-block">
                        <div class="author-info-box">
                          <div class="author-name">
                            <a href="/" target="_blank" rel class="username username ellipsis">
                     <span class="name" style="max-width:256px;">
                      {{ c.createUserName }}
                     </span>
                      </a>
                    </div>
                    <div class="meta-box">
                      <time datetime="2023-06-27T01:51:03.000Z" title="Tue Jun 27 2023 09:51:03 GMT+0800 (中国标准时间)" class="time">
                        发布时间：{{ c.gmtCreate }}
                      </time>
                      <span v-show="this.editShow" @click="change(c.id)"  class="edit-btn" style="margin-left: 16px;">编辑</span>
                    </div>
                  </div>
                </div>
                <div class="article-content markdown-viewer">
                  <div class="markdown-body cache">
                    <blockquote>
                      <p>{{c.brief}}
                      </p>
                    </blockquote>
                    <el-divider></el-divider>
                    <!--                 正文-->
<!--                    <div id="htmls" v-html="markdown.render(renderedMarkdown)"></div>-->
                    <div ref="divRef" style="">
                      <div class="aie-container">
                        <div class="aie-container-header" v-show="false">""</div>
                        <div class="aie-container-main"></div>
                        <div class="aie-container-footer" v-show="false"></div>
                      </div>
                      </div>
                  </div>
                </div>
                <el-divider></el-divider>
              </article>

            </div>
          </el-card>
<!--          评论相关-->
          <el-card style="margin-top: 20px;padding: 0 17px"  v-if="isVisible">
            <div style="font-size: 18px;line-height: 30px;text-align: left">评论</div>
            <br>
            <el-row :gutter="10" style="height: 40px">
              <el-col :span="2" v-if="user!=null">

<!--                用户头像-->
                <el-avatar :src="user.avatar" ></el-avatar>
              </el-col>
              <el-col :span="2" v-if="user==null">
                <el-avatar src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/58aaf1326ac763d8a1054056f3b7f2ef.svg" ></el-avatar></el-col>
              <el-col :span="22">
<!--                未登录评论框-->
                <div v-if="user==null" style="width: 700px;height: 90px;background-color: #f2f3f5;font-size: 14px; display: flex; align-items: center; justify-content: center;">
                  <div style="display: flex; align-items: center;">

                    <el-button @click="post()" style="background-color: #1e80ff;color: white;height: 36px;">登录/注册</el-button>
                  </div>
                  <span style="margin-left: 10px;">即可发表评论！</span>
                </div>
<!--                未登录评论框结束-->
<!--                已登录评论框-->
                <div style="border-color: #1e80ff;width: 700px;height: 90px;padding: 0px" class="text-right" v-else>
<el-row>
                      <el-input
                          v-model="comment.content"
                          maxlength="1000"
                          placeholder="平等表达友善交流"
                          show-word-limit
                          type="text"
                          style="width: 700px;height: 60px;margin-top: 0;"
                      />
</el-row>
<el-row style="margin-right: 0">
  <el-col >
    <el-button @click="post()" style="background-color: #1e80ff;color: white">发送</el-button>
  </el-col>
</el-row>
                </div>
<!--                已登录评论框结束-->
              </el-col>
            </el-row>
            <p style="color: #666;font-size: 14px;text-align: center;margin-top: 90px;text-align: left">最热|最新</p>
            <!--    列表开始     -->
            <el-row :gutter="15" style="margin-top: 20px" v-for="item in commentArr">
              <el-col :span="2">

<!--                <el-popover placement="top" title=""-->
                <el-dropdown placement="top">

                <el-avatar style="margin-top:17px;" :src="item.avatar"></el-avatar>

                  <el-dropdown-menu>

                  </el-dropdown-menu>

                </el-dropdown>
              </el-col>
              <el-col :span="22" style="text-align: left">
                <p style="font-weight: bold;margin-bottom: 10px">{{ item.authorName}} </p>
                <p style="margin-bottom: 10px;margin-top: 0px">{{ item.content }}</p>
                <p style="font-size: 12px;color: #666;margin-bottom: 10px">{{ item.gmtCreate }}
<!--                  <button style="margin-left: 10px" @click="likeComment(comment.id)" class="no-button"><el-icon size="13px" ><Chicken /></el-icon>   {{item.upCount}} </button>-->
<!--                  <span style="margin-left: 10px"><el-icon size="13px"><ChatLineSquare /></el-icon>      {{item.floor}}</span>-->
                </p>
              </el-col>
<!--              <el-dialog>-->

<!--              </el-dialog>-->
            </el-row>
            <!--    列表结束     -->
          </el-card>
          <!--评论相关结束-->


        </el-col>
      </el-row>
    </div>
  </el-col>

<!--    右侧-->
  <el-col :span="4" v-if="isVisible">
    <el-card style="width: 300px;height: 144px;margin-left: 150px">
      <router-link to="/personal" class="no-style">
      <el-row >
        <el-col :span="5">
          <el-avatar :src="author.avatar" :size="58" style="border: 5px solid white"></el-avatar>
        </el-col>
        <el-col :span="8">
          <el-row style="font-size: 18px;margin-top: 5px;margin-left: 7px">{{ author.username }}</el-row>
          <el-row style="font-size: 14px;margin-top: 2px;margin-left: 8px;color: #8a919f">@{{ author.careerDirection }}</el-row>
        </el-col>
        <el-col :span="11"></el-col>
      </el-row>
      <el-row style="margin-top: 6px;">
        <span style="margin-left: 10px;">联系邮箱： <span style="color: rgba(30,128,255,.8)">{{author.email}}</span></span>
<!--        <el-col :span="8">-->
<!--          <p style="margin: 0 auto" class="num">{{ c.articleCount }}</p>-->
<!--          <p style="margin: 0 auto;margin-top: 3px" class="text">文章</p>-->
<!--        </el-col>-->
<!--        <el-col :span="8">-->
<!--          <p style="margin: 0 auto" class="num">{{ c.clickCount }}</p>-->
<!--          <p style="margin: 0 auto;margin-top: 3px" class="text">阅读</p>-->
<!--        </el-col>-->
<!--        <el-col :span="8">-->
<!--          <p style="margin: 0 auto" class="num">{{ c.fansCount }}</p>-->
<!--          <p style="margin: 0 auto;margin-top: 3px" class="text">粉丝</p>-->
<!--        </el-col>-->
      </el-row>
      </router-link>
<!--&lt;!&ndash;      关注私信&ndash;&gt;-->
<!--      <el-row style="margin-top: 20px">-->
<!--        <el-col :span="12">-->
<!--          <el-button style="color: white;background-color: #1e80ff;width: 110px;height: 34px">关注</el-button>-->
<!--        </el-col>-->
<!--        <el-col :span="12">-->
<!--          <el-button style="color: #1e80ff;background-color: #f2f3f5;border-color: #abcdff;width: 110px;height: 34px">私信</el-button>-->
<!--        </el-col>-->
<!--      </el-row>-->

    </el-card>

<!--固钉-->
    <div >
        <!--   相关推荐文章开始    -->
        <el-card style="margin-top: 20px;width: 300px;text-align: left;margin-left: 150px">
          <p style="margin-top: 0px">相关推荐</p>
          <hr  style="border-color: #e4e6eb;opacity: 0.2">
          <el-row :gutetr="10" v-for="item in recommendArr">
            <el-col>
              <a style="text-decoration: none;color: black"
                 href="javascript:void(0)" @click="detail(item.id)" >
                <p class="title_p" style="margin-top: 10px">{{item.title}}</p>
                <p style="color: #8a919f;margin-top: 5px;margin-bottom: 5px;font-size: 14px">{{item.clickCount}}阅读 • {{item.upCount}}点赞</p>
              </a>
<!--              <p style="color: #8a919f;margin-top: 7px;margin-bottom: 11px">{{item.clickCount}}阅读•{{item.upCount}}点赞</p>-->
            </el-col>

          </el-row>
        </el-card>
        <!--   相关推荐文章结束    -->


        <!--   热门文章开始    -->

        <!--   热门文章结束    -->
    </div>
    <!--固钉结束-->

  </el-col>
</el-row>
  </div>
  </div>
</template>

<script  setup>

import {onBeforeMount,onUpdated, onMounted,onActivated ,onUnmounted,ref, watch} from "vue";
import axios from "axios";
import router from "@/router";
import qs from "qs";
import {ElMessage} from "element-plus";
import tokenAxios from "@/http/request/TokenAxios";
import simpleAxios from "@/http/request/SimpleAxios";
import MarkdownIt from 'markdown-it';
import {AiEditor} from "aieditor";
import "aieditor/dist/style.css"
const user=ref(getUser())
const text = ref('')
const commentArr = ref([]);
const author=ref({});
const markdown=new MarkdownIt()
const renderedMarkdown=ref('');
const markdowndetail=ref('');
const divRef = ref();
const reward1=ref(false);
const loadComments = ()=>{
  //发请求获取评论列表
  axios.post(BASE_URL+':49282/comments/list-by-article/'+c.value.id,c.value.id).then((response)=>{
    if (response.data.state==20000){
      commentArr.value = response.data.data;
      console.log("comment:"+commentArr.value);
    }
  })
}
let aiEditor=null;
const comment = ref({content:""});
const post = ()=>{
  let user = getUser();
  if (user==null){
    alert("请先登录!");router.push('/');return;
  }else {
    //UserID 文章id  评论内容
    comment.value.userId = user.id;
    comment.value.articleId = c.value.id;
    comment.value.resourceId=c.value.id;
    // let data = qs.stringify(comment.value);
    tokenAxios.post(BASE_URL+':49282/comments/add-new/article-comment',comment.value).then((response)=>{
      console.log(comment.value)
      if (response.state==20000){
        ElMessage.success("评论完成!");
        comment.value.content = '';
        //查询评论列表
        loadComments();
      }
    })
  }


}

const recommendArr = ref([]);

const hotArr = ref([]);

const c = ref({});

// author.value.avatar=author.userImgUrl;

let detail = (id) => {
  console.log("!2312312312312");
  //修改地址栏中的内容
  router.push('/detail?id='+id);
  //通过id查询文章详情
  axios.post(BASE_URL + ':49282/article/' + id,id).then((response) => {
    if (response.data.state == 20000) {
      c.value = response.data.data;;
      renderedMarkdown.value=c.value.detail;
      aiEditor.setContent(c.value.detail);
      loadComments();//加载评论
    }
  })
}

const getAuthor = (id) => {
  axios.post(BASE_URL+':49282/article/'+id+'/image',id).then((response)=>{
    if (response.data.state == 20000){
      author.value=response.data.data;
    }
  })
}


let LikeAction=ref('');
//文章点赞
const articleLike=()=>{
  //判断是否登录
if (getUser()==null){
  alert("请先登录!");router.push('/');return;
}else {
  let articleId = new URLSearchParams(location.search).get('id');
  let userId=user.value.id
  let UserLikeArticleDTO={
    articleId: articleId,
    userId: userId,
    state:1
  }
//判断是否点赞
  if (LikeAction==='liked'){
    let url=BASE_URL+":49282/LikeCollect/ArticleDeleteLikeOrCollect"
    tokenAxios.post(url,UserLikeArticleDTO).then((response)=>{
      if (response.state === 20000) {
        ElMessage.success('取消点赞成功')
      }
    })
    LikeAction = 'filled'
    c.up_count = c.up_count - 1
  } else {
    LikeAction = 'liked';
    c.up_count = c.up_count + 1
    let url=BASE_URL+":49282/LikeCollect/NoteLikeOrCollect"
    tokenAxios.post(url,UserLikeArticleDTO).then((response)=>{
      if (response.state === 20000) {
        ElMessage.success('点赞成功')
      }
    })
  }
}
}

//文章收藏
let collectAction=ref('');
const collectArticle=()=>{

  //判断是否登录
  if (getUser()==null){
    alert("请先登录!");router.push('/');return;
  }else {
    let articleId = new URLSearchParams(location.search).get('id');
    let userId=user.value.id
    let UserLikeArticleDTO={
      articleId: articleId,
      userId: userId,
      state:2
    }

    //收藏
    if (collectAction == 'liked') {
      let url = BASE_URL + ":49282/LikeCollect/ArticleDeleteLikeOrCollect"
      tokenAxios.post(url, UserLikeArticleDTO).then((response) => {
        if (response.state == 20000) {
          ElMessage.success('取消收藏成功')
        }
      })
      collectAction = 'filled'
      c.collectTimes = c.collectTimes - 1
    } else {
      collectAction = 'liked';
      c.collectTimes = c.collectTimes + 1
      let url = BASE_URL + ":49282/LikeCollect/NoteLikeOrCollect"
      tokenAxios.post(url, UserLikeArticleDTO).then((response) => {
        if (response.state == 20000) {
          ElMessage.success('收藏成功')
        }
      })
    }


  }

}

//打赏
let cost = ref(50);
const button1 = () => {
  cost = 50;
}
const button2 = () => {
  cost = 100;
}
const button3 = () => {
  cost = 500;
}
const reward = () => {
  //判断是否登录
  if (getUser() == null) {
    alert("请先登录!");
    router.push('/index');
    return;
  }
  let articleId = new URLSearchParams(location.search).get('id');
  let rewardCount = cost
  let RewardInfo = {
    articleId: articleId,
    rewardCount: rewardCount
  }
  let url = BASE_URL + ":49283/reward/"
  console.log(articleId);
  tokenAxios.post(url, RewardInfo).then((response) => {
    if (response.state == 20000) {
      ElMessage.success('打赏成功')
    }else {
      ElMessage.error(response.message);
    }
  })

}

// const parseMarkdown=((markdowns)=>{
//   const md=new MarkdownIt();
//   console.log(markdowns);
//   console.log("标记");
//   return md.render(markdowns);
// })
const x = () => {
  window.scrollTo(0, 0);
}


onActivated(()=>{
  x();
})


onMounted(() => {




  aiEditor = new AiEditor({
    element: divRef.value,
    placeholder: "",
    content: c.value.detail,
    editable:false,
    ai: {
      models: {
        spark: {
          protocol: "wss",
          appId: "64b424ed",
          apiKey: "468723324d593bdece2b9f7cd74cba22",
          apiSecret: "NzM1YzgxZTJkMDM1YWY4OTA0ZjgxNjZh",
        },
        commands:[
          {
            name: "AI 续写",
            prompt: "请帮我继续扩展一些这段话的内容",
            model: "spark",
          },
          {
            name: "AI 提问",
            prompt: "",
            model: "spark",
          },
        ]
      }
    }
  });

  let id = new URLSearchParams(location.search).get('id');
  detail(id);//通过id查询详情
  //请求热门文章
  axios.get(BASE_URL + ':49282/article/hot').then((response) => {
    if (response.data.state == 20000) {
      hotArr.value = response.data.data;
      console.log(hotArr.value);
    }
  })
  //
  // //请求文章标签
  //
  //请求推荐文章
  axios.get(BASE_URL + ':49282/article/recommend').then((response) => {
    if (response.data.state == 20000) {
      recommendArr.value = response.data.data;

      console.log(recommendArr.value);
    }
  })
  console.log(id);
  simpleAxios.get(BASE_URL + ':49282/article/view?id='+id).then((response) => {

  })

  //请求作者头像
  getAuthor(id);

    // 使用 markdown-it 渲染 c.detail

  document.documentElement.scrollTop = 0


})
//阅读模式

const isVisible = ref(true); // 创建一个响应式引用，初始值为false

const toggleVisibility = () => {
  isVisible.value = !isVisible.value; // 切换可见状态
};
onUnmounted(() => {
  aiEditor && aiEditor.destroy();
})


</script>

<style scoped>
.overlap-button{
  position: fixed;
width: 48px;
  height: 48px;

}
.overlap-icon{
color: #8a919f;
}
.num{
font-size: 16px;
  font-weight: 400;
  line-height: 21px;
}
.text{
  font-size: 13px;
  font-weight: 280;
  line-height: 19px;
}

.my-button:hover{
  background-color: #c2c8d1;

}
.my-icon:active{
  background-color: #3370ff;
  color: white;
  opacity: 1;
}
.text-right{
  text-align: right;
}
.title_p{
  font-size: 14px;
color: black;
  margin: 0px;
}
.view{
  color: #8a919f;
}

.no-style{
  color: inherit;
  text-decoration: none;
}
.main-area{
  position: relative;
  width: 820px;
  max-width: 100%;
  box-sizing: border-box;
}
.article-area {
  margin-bottom: 1.67rem;
}
.main-area .article {
  border-radius: 4px 4px 0 0;
}
.main-area{
  border-radius: 4px;
  background-color: #fff;
  padding-left: 2.67rem;
  padding-right: 2.67rem;
  box-sizing: border-box;
}
.article {
  position: relative;
  padding-top: 2.667rem;
  z-index: 1;
  overflow: hidden;
}
.main-area.recommended-area .entry-list .entry, .main-area {
  padding-left: 2rem;
  padding-right: 2rem;
  margin-left: 50px;
}
.article-title {
  margin: 0 0 1.667rem;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.31;
  color: #252933;
}
.author-info-block {
  display: flex;
  align-items: center;
  margin-bottom: 1.667rem;
}
.author-info-block .author-info-box {
  display: flex;
  min-width: 0;
  flex-grow: 1;
}
.author-info-block .author-name {
  height: 2rem;
  display: flex;
  align-items: center;
}
.author-info-block .author-name .username {
  font-size: 10px;
  font-weight: 400;
  color: #515767;
  line-height: 2rem;
}
.username .name {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.author-info-block .author-name .username {
  font-size: 14px;
  font-weight: 400;
  color: #515767;
  line-height: 2rem;
}
.meta-box {
  font-size: 14px;
  color: #8a919f;
  line-height: 22px;
  display: flex;
  align-items: center;
}
.meta-box .time {
  letter-spacing: 1px;
  margin-left: 16px;
}
/*.markdown-body{*/
/*  position:relative;*/
/*  word-break:break-word;*/
/*  line-height:1.75;*/
/*  font-weight:400;*/
/*  font-size:15px;*/
/*  overflow-x:hidden;*/
/*:#333}*/
/*.markdown-body p{line-height:inherit;margin-top:22px;margin-bottom:22px}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{line-height:1.5;margin-top:35px;margin-bottom:10px;padding-bottom:5px}.markdown-body h1{font-size:30px;margin-bottom:5px}.markdown-body h2{font-size:24px;display:inline-block;font-weight:700;background:#ef7060;color:#fff;padding:6px 8px 0 0;border-top-right-radius:6px;margin-right:2px;box-shadow:6px 3px 0 0 rgba(239,112,96,.2)}.markdown-body h2:before{content:" ";display:inline-block;width:8px}.markdown-body h2:after{content:" ";position:absolute;display:block;width:calc(100% - 50px);border-bottom:3px solid #ef7060}.markdown-body h3{font-size:18px;padding-bottom:0}.markdown-body h4{font-size:16px}.markdown-body h5{font-size:15px}.markdown-body h6{margin-top:5px}.markdown-body img{max-width:100%}.markdown-body hr{border:none;border-top:1px solid #3e3e3e;margin-top:32px;margin-bottom:32px;height:1px}.markdown-body code{word-break:break-word;border-radius:2px;overflow-x:auto;background-color:rgba(27,31,35,.05);color:#ff502c;font-size:.87em;padding:.065em .4em}.markdown-body code,.markdown-body pre{font-family:JetBranins Mono,Monaco,Consolas,Courier New,monospace}.markdown-body pre{overflow:auto;position:relative;line-height:1.75;box-shadow:0 0 8px hsla(0,0%,43.1%,.45);border-radius:4px;margin:16px}.markdown-body pre:before{content:"";display:block;height:30px;width:100%;margin-bottom:-7px;background:url() 10px 10px no-repeat;background-size:40px;background-color:#fdfdfd}.markdown-body pre>code{font-size:12px;padding:15px 12px;margin:0;word-break:normal;display:block;overflow-x:auto;color:#333;background:#fdfdfd}.markdown-body a{text-decoration:none;font-weight:700;color:#ef7060;border-bottom:1px solid #ef7060}.markdown-body a:active,.markdown-body a:hover{color:#ef2d26}.markdown-body table tr td,.markdown-body table tr th{border:1px solid #ccc;padding:5px 10px}.markdown-body table{display:block!important;width:auto;max-width:100%;overflow:auto;border-collapse:collapse}.markdown-body thead{background:#f0f0f0;color:#000;text-align:left}.markdown-body tr:nth-child(2n){background-color:#f8f8f8}.markdown-body blockquote{margin-inline-start:0;margin-inline-end:0;border-left:3px solid #ef7060;background:#fff9f9;padding:1px 20px;margin-top:20px}.markdown-body ol,.markdown-body ul{padding-left:28px}.markdown-body ol li,.markdown-body ul li{margin-bottom:0;list-style:inherit}.markdown-body ol li .task-list-item,.markdown-body ul li .task-list-item{list-style:none}.markdown-body ol li .task-list-item ol,.markdown-body ol li .task-list-item ul,.markdown-body ul li .task-list-item ol,.markdown-body ul li .task-list-item ul{margin-top:0}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-top:3px}.markdown-body ol li{padding-left:6px}@media (max-width:720px){.markdown-body h1{font-size:24px}.markdown-body h2{font-size:20px}.markdown-body h3{font-size:18px}}*/

.markdown-body blockquote {
  color: #666;
  padding: 1px 23px;
  margin: 22px 0;
  border-left: 4px solid #cbcbcb;
  background-color: #f8f8f8;
}
.markdown-body blockquote>p {
  margin: 10px 0;
}
</style>